<template>
    <div style="margin-top: 15px;"> 
        <div class="tabs">
    		<div class="tabsbox">
    			<div class="tabsItem" v-for="(item, index) in list" :key="index" :class="{ active: index == checkIndexs }" @click="checkHandel(index, item)">{{ item }}</div>
    		</div>
    		<div class="tabsTotal">
    			<div class="time">{{ taskTime }}</div>
    			<div class="title">till campaign ends</div>
    		</div>
    	</div>
    </div>
</template>

<script>
export default {
    props: {
        checkIndex: {
            type: Number,
            default: 0
        },
        taskTime: {
            type: String,
            default: () => ''
        }
    },
    data() {
        return {
            list: ['You Tasks', 'Completed'],
            checkIndexs:0
        }
    },

    methods: {
       
        checkHandel(i, item) {
            this.checkIndexs = i
            this.$emit("checkHandel", i, item)
        }
    }
}
</script>


<style lang="scss" scoped>
.tabs{
		width: 100%;
		height: 38px;
		border-bottom: 1px solid #31383D;
		display: flex;
		justify-content: space-between;
		color: #fff;
		margin-bottom: 20px;
		.tabsbox{
			width: 70%;
			display: flex;
			.tabsItem{
				width: 35%;
				height: 100%;
				line-height: 38px;
				text-align: center;
				font-size: 14px;
			}
		}
		.tabsTotal{
			margin-top: 5px;
			width: 30%;
			padding-right: 20px;
			.time{
				font-size: 12px;
				height: 15px;
				line-height: 15rpx;
				text-align: end;
				color:#F6CB23;
				font-weight: bold;
			}
			.title{
				font-size: 10px;
				// height: 15px;
				// line-height: 15px;
				color:#F6CB23;
				text-align: end;
			}
		}
		
	}
	.active{
		border-bottom: #C1E3FF 1px solid;
		
	}
</style>